import React, { useState } from "react";
import { View, Text } from '@tarojs/components';
import { Close } from '@taroify/icons';
import { SectionDescriptionTran, SectionIcon } from '@/constants/constants';
import RefInput from "./refInput";


interface GenericContentSectionProps {
  contentData: {
    content: string;
    subSectionType: string;
  };
  onChange: (updatedContent: { content: string; subSectionType: string }) => void;
  onRemove: () => void;
  active: boolean;
}

const GenericContentSection: React.FC<GenericContentSectionProps> = ({ contentData, onChange, onRemove, active }) => {
  const [text, setText] = useState(contentData.content);

  const handleChange = (newText: string) => {
    setText(newText);
    onChange({ ...contentData, content: newText });
  };

  const IconComponent = SectionIcon[contentData.subSectionType];

  return (
    <View>
      <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <View style={{ display: 'flex', alignItems: 'center' }}>
          <IconComponent />
          <Text className='subsection-title' style={{ marginLeft: 8, fontSize: '16px' }}>
            {SectionDescriptionTran[contentData.subSectionType]}
          </Text>
        </View>
        <Close style={{fontSize: '16px'}} onClick={onRemove} />
      </View>
      <RefInput value={text} onChange={(e) => handleChange(e)} active={active} />
    </View>
  );
};

export default GenericContentSection;
